<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #root {
      /* background-color: yellow; */
      height: 1200px;
      width: 100%;
      overflow: auto;
    }

    #child {
      cursor: pointer;
      position: absolute;
      background-color: red;
      height: 20px;
      width: 20px;
      left: 0;
      top: 0;
    }
  </style>
</head>
测试一下

<div id="root">
  <div id="child"></div>
</div>

<body>
  <script>
    const child = document.getElementById('child')
    let startLeft = 0;
    let startTop = 0;

    function move() {
      startLeft += 1;
      startTop += 1;
      child.style.left = startLeft + 'px';
      child.style.top = startTop + 'px';
      // console.log(123);

      if (startLeft < 1000) {
        requestAnimationFrame(move)
      }
    }

    child.addEventListener('mouseenter', () => {
      requestAnimationFrame(move)
    })

    child.addEventListener('mouseout', () => {
      cancelAnimationFrame(move)
      console.log(1234);
    })

    // setInterval(() => {
    //   startLeft += 1;
    //   startTop += 1;
    //   child.style.left = startLeft + 'px';
    //   child.style.top = startTop + 'px';
    //   console.log(startLeft, startTop);
    // }, 50);

  </script>
</body>

</html>